<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/webDemo/js/utils.js"></script>
<!--    <script type="text/javascript">	-->
<!--	function showElements(form){-->
<!--		var s="";-->
<!--		for(var i=0;i<form.elements.length;i++){ //循环显示表单元素的数据-->
<!--			s+=form.elements[i].tagName+":"+form.elements[i].name+"="+form.elements[i].value+"\n";-->
<!--		}-->
<!--		alert(s);-->
<!--	}-->
<!--	-->
<!--	function show(){-->
<!--		//获取表单对象-->
<!--		//var formObj=document.forms[0]; //通过索引获取表单-->
<!--		//var formObj=document.forms["formName"]; //通过名字获取表单对象-->
<!--		var formObj=document.formName; -->
<!--		//alert("form's action="+formObj.action);-->
<!--		//showElements(formObj);-->
<!--		//var　userName=formObj.elements[0];-->
<!--		//var　userName=formObj.elements["userName"];  -->
<!--		var userName=formObj.userName;-->
<!--		//alert("userName's value="+userName.value);-->
<!--		-->
<!--		var userSex=formObj.userSex;-->
<!--		//alert(userSex);-->
<!--		userSex[0].checked=true;  //修改单选项的选中值-->
<!--		formObj.userRelax[1].checked=true;　//修改复选框的选中值-->
<!--		formObj.userRelax[2].checked=true;-->
<!--		-->
<!--		var selectObj=formObj.userJob; //下拉列表-->
<!--		var selectValue=selectObj.value;//列表选中值-->
<!--		alert("列表值："+selectValue);-->
<!--		var selectedIndex=selectObj.selectedIndex; -->
<!--		alert("列表选中索引："+selectedIndex);-->
<!--		-->
<!--		//selectObj.selectedIndex=0; //修改下拉列表的选项-->
<!--		selectObj.value=30; //value=ｓｅｌｅｃｔ列表的ｏｐｔｉｏｎ选项值，修改列表选项-->
<!--		var optionInfo="";-->
<!--		for(var i=0;i<selectObj.options.length;i++){-->
<!--			var optionObj=selectObj.options[i]; //获取一个<option>-->
<!--			optionInfo+="value="+optionObj.value+",text="+optionObj.text+",selected="+optionObj.selected+"\n";-->
<!--			if(i==1){-->
<!--				optionObj.selected=true; //修改ｏｐｔｉｏｎ的选中设置-->
<!--			}-->
<!--		}-->
<!--		alert(optionInfo);-->
<!--	}-->
<!--	-->
<!--	/*校验文本数据非空-->
<!--	txtObj:文本对象-->
<!--	errSpanId:　错误提示块的id-->
<!--	errMsg:错误提示内容-->
<!--	return true:数据非空；　false:空数据-->
<!--	*/-->
<!--	function validNotEmpty(txtObj,errSpanId,errMsg){-->
<!--		var txtValue=txtObj.value;-->
<!--		var errSpan=document.getElementById(errSpanId);			-->
<!--		if(txtValue=='' || txtValue.trim()==""){-->
<!--			if(errSpan!=null){-->
<!--				errSpan.innerText=errMsg;-->
<!--			}-->
<!--			return false;-->
<!--		}else{-->
<!--			if(errSpan!=null){-->
<!--				errSpan.innerText="";-->
<!--			}-->
<!--			return true;-->
<!--		}-->
<!--	}-->
<!--	-->
<!--	/*校验文本数据长度-->
<!--	txtObj:文本对象-->
<!--	errSpanId:　错误提示块的id-->
<!--	errMsg:错误提示内容-->
<!--	return true:数据非空；　false:空数据-->
<!--	*/-->
<!--	function validLength(txtObj,minLen,maxLen,errSpanId,errMsg){-->
<!--		var txtValue=txtObj.value;-->
<!--		var errSpan=document.getElementById(errSpanId);			-->
<!--		if(txtValue.length<minLen || txtValue.length>maxLen){-->
<!--			if(errSpan!=null){-->
<!--				errSpan.innerText=errMsg;-->
<!--			}-->
<!--			return false;-->
<!--		}else{-->
<!--			if(errSpan!=null){-->
<!--				errSpan.innerText="";-->
<!--			}-->
<!--			return true;-->
<!--		}-->
<!--	}-->
<!--	-->
<!--	/*校验单、复选框选项比选一项-->
<!--	objAry:选项对象数组-->
<!--	errSpanId:　错误提示块的id-->
<!--	errMsg:错误提示内容-->
<!--	return true:数据非空；　false:空数据-->
<!--	*/-->
<!--	function validChecked(objAry,errSpanId,errMsg){-->
<!--	    var result=false; //默认不通过校验-->
<!--		for(var i=0;i<objAry.length;i++){-->
<!--			var obj=objAry[i]; //获取一项元素-->
<!--			//判断是否选中-->
<!--			if(obj.checked==true){-->
<!--				result=true;-->
<!--				break;-->
<!--			}		-->
<!--		}-->
<!--		-->
<!--		var errSpan=document.getElementById(errSpanId);	-->
<!--		if(result==false){			-->
<!--			if(errSpan!=null){-->
<!--				errSpan.innerText=errMsg;-->
<!--			}-->
<!--		}else{-->
<!--			if(errSpan!=null){-->
<!--				errSpan.innerText="";-->
<!--			}-->
<!--		}-->
<!--		return result;-->
<!--	}-->
<!--	-->
<!--	/*校验单、复选框选项比选一项-->
<!--	objAry:选项对象数组-->
<!--	errSpanId:　错误提示块的id-->
<!--	errMsg:错误提示内容-->
<!--	return true:数据非空；　false:空数据-->
<!--	*/-->
<!--	function validSelected(selectObj,errSpanId,errMsg){-->
<!--	    var result=false; //默认不通过校验-->
<!--		var index=selectObj.selectedIndex; -->
<!--		if(index>0){-->
<!--			result=true;-->
<!--		}		-->
<!--		var errSpan=document.getElementById(errSpanId);	-->
<!--		if(result==false){			-->
<!--			if(errSpan!=null){-->
<!--				errSpan.innerText=errMsg;-->
<!--			}-->
<!--		}else{-->
<!--			if(errSpan!=null){-->
<!--				errSpan.innerText="";-->
<!--			}-->
<!--		}-->
<!--		return result;-->
<!--	}-->
<!--	/*提交表单*/-->
<!--	function submitForm(){-->
<!--		var formObj=document.formName; -->
<!--		//表单校验：-->
<!--		var valid=true; //设置标志位，ｔｒｕｅ表示校验通过-->
<!--		var errMsg="表单填写错误：\n";-->
<!--		//依次校验表单元素-->
<!--		/*var userName=formObj.userName.value; //获取元素数值-->
<!--		if(userName=="" || userName.trim()==""){-->
<!--			var errSpan=document.getElementById("userNameErrSpan");-->
<!--			errSpan.innerText="用户名必填！";-->
<!--			//errMsg+="用户名必填！\n";-->
<!--			//formObj.userName.focus();//焦点-->
<!--			valid=false;-->
<!--		}-->
<!--		var userPwd=formObj.userPwd.value; //获取元素数值-->
<!--		if(userPwd=="" || userPwd.trim()==""){-->
<!--			document.getElementById("userPwdErrSpan").innerText="密码必填！";-->
<!--			//errMsg+="密码必填！\n";-->
<!--			//formObj.userPwd.focus();//焦点-->
<!--			valid=false;-->
<!--		}*/-->
<!--		if(!validNotEmpty(formObj.userName,"userNameErrSpan","用户名必填！")){-->
<!--			valid=false; //校验未通过-->
<!--		}-->
<!--		if(!validNotEmpty(formObj.userPwd,"userPwdErrSpan","密码必填！")){-->
<!--			valid=false; //校验未通过-->
<!--		}else{-->
<!--			if(!validLength(formObj.userPwd,6,20,"userPwdErrSpan","密码长度必须在6到20位之间！")){-->
<!--				valid=false; //校验未通过-->
<!--			}-->
<!--		}-->
<!--		-->
<!--		if(!validChecked(formObj.userSex,"userSexErrSpan","性别必选！")){-->
<!--			valid=false; //校验未通过-->
<!--		}-->
<!--		if(!validChecked(formObj.userRelax,"userRelaxErrSpan","爱好必选！")){-->
<!--			valid=false; //校验未通过-->
<!--		}-->
<!--		if(!validSelected(formObj.userJob,"userJobErrSpan","必须一项！")){-->
<!--			valid=false; //校验未通过-->
<!--		}-->
<!--		-->
<!--		//如果通过表单校验，则提交-->
<!--		if(valid==true){-->
<!--			formObj.submit(); //通过表单的ｓｕｂｍｉｔ()方法提交表单-->
<!--		}else{-->
<!--			//alert(errMsg);-->
<!--		}		-->
<!--	}-->


<!--	</script>-->
	  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

	  //表单验证的内容
	  <script>
		  $.validator.setDefaults({
			  submitHandler: function() {
				  alert("提交事件!");
			  }
		  });
		  $().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
			  $("#signupForm").validate({
				  errorPlacement: function(error, element) {
					  if (element.is(":checkbox")||element.is(":radio")){
						  error.appendTo(element.parent());
					  }else {
						  error.insertAfter(element);
					  }
				  },//修改提示出现的位置放在最后面
				  rules: {
					  userName: {
						  required: true,
						  minlength: 2
					  },
					  password: {
						  required: true,
						  minlength: 5
					  },
					  confirm_password: {
						  required: true,
						  minlength: 5,
						  equalTo: "#password"
					  },
					  userRelax: {
						  required: true,
						  minlength: 1,
					  },
					  topic: {
						  required: true,
						  minlength: 1
					  },
					  sex: "required"
				  },
				  messages: {

					  userName: {
						  required: "请输入用户名",
						  minlength: "用户名必需由两个字母组成"
					  },
					  password: {
						  required: "请输入密码",
						  minlength: "密码长度不能小于 5 个字母"
					  },
					  confirm_password: {
						  required: "请输入密码",
						  minlength: "密码长度不能小于 5 个字母",
						  equalTo: "两次密码输入不一致"
					  },
					  sex:"请选择你的性别",
					  userRelax:"请选择一个爱好",
					  topic: "请选择一个职业"
				  }
			  });
		  });
	  </script>
	  //省市区三级级联
	  <script>
		  var iNum1;
		  var iNum2;
		  var aProvince = ['湖北','江苏','安徽'];
		  var aCity =[['武汉','黄冈','荆门'],['南京','无锡','镇江'],['合肥','安庆','黄山']];
		  var aCountry =[[['武汉1','武汉2'],['黄冈1','黄冈2'],['荆门1','荆门2']],[['南京1','南京2'],['无锡1','无锡2'],['镇江1','镇江2']],[['合肥1','合肥2'],['安庆1','安庆2'],['黄山1','黄山2']]];
		  $(function () {
			  for(var i=0;i<aProvince.length;i++){
				  $('#selProvince').append('<option>'+aProvince[i]+'</option>');
			  };
			  $('#selProvince').change(function () {
				  $('#selCity').children().not(':eq(0)').remove();<!--eq() 方法返回带有被选元素的指定索引号的元素，所以只要不是请选择就会启动remove()-->
				  $('#selCountry').children().not(':eq(0)').remove();
				  iNum1 = $(this).children('option:selected').index();
				  var aaCity = aCity[iNum1-1];
				  for(var j=0;j<aaCity.length;j++){
					  $('#selCity').append('<option>'+aaCity[j]+'</option>');
				  }
			  });
			  $('#selCity').change(function () {
				  $('#selCountry').children().not(':eq(0)').remove();
				  iNum2 = $(this).children('option:selected').index();
				  var aaCountry = aCountry[iNum1-1][iNum2-1];
				  for(var k=0;k<aaCountry.length;k++){
					  $('#selCountry').append('<option>'+aaCountry[k]+'</option>');
				  }
			  })
		  })

	  </script>
	  <style>
		  .error{
			  color:red;
		  }

	  </style>

  </head>
  
  <body>
  <input type="button" value="showInfo" onclick="show()"/>
  <form name="formName" action="formResult.jsp" id="signupForm" method="get">
	     <table border="1" cellpadding="5" cellspacing="0">
	    	<caption>新增用户 </caption>
	    	<tr>	    		
	    		<td>姓名：</td>
	    		<td><input type="text"  minlength="2" name="userName" id="userName" value="" required/></td>
	    	</tr>
	    	<tr>	    		
	    		<td>密码：</td>
	    		<td><input type="password" name="password" required/></td>
	    	</tr>
			 <tr>
				 <td>验证密码：</td>
				 <td><input type="password" name="confirm_password" required/></td>
			 </tr>
	    	<tr>
	    		<td>性别：</td>
	    		<td><input type="radio" id="male" name="sex" value="0" sexLabel="男">男
	    		    <input type="radio" id="female" name="sex" value="1" sexLabel="女" required>女
				</td>
	    	</tr>
	    	<tr>    		
	    		<td>爱好：</td>
	    		<td><input type="checkbox" name="userRelax" value="0">游泳
	    		    <input type="checkbox" name="userRelax" value="1" >阅读
	    		    <input type="checkbox" name="userRelax" value="2">篮球</td>
	    	</tr>
	    	<tr>    		
	    		<td>职业：</td>
	    		<td><select name="topic" required > <!--  size="10" multiple="true"-->
					    <option value="">请选择职业 </option>
	    				<option value="10" >护士 </option>
	    				<option value="20">医生</option>
	    				<option value="30">教师 </option>
	    				<option value="40">自由职业 </option>
	    		    </select>
	    		    </td>    		
	    	</tr>
	    	<tr>
	    		<td>头像：</td>
	    		<td><input type="file" name="userFace" /></td>
	    		
	    	</tr>
	    	<tr>
	    		<td>备注：</td>
	    		<td><textarea name="bz" cols="100" rows="10">备注内容</textarea></td>
	    		
	    	</tr>

			 <tr>
				 <td>请选择省份：</td>
				 <td><select name="" id="selProvince">
					 <option value="">----请选择----</option>
				 </select>
					 <select name="" id="selCity">
						 <option value="">----请选择----</option>
					 </select>
					 <select name="" id="selCountry">
						 <option value="">----请选择----</option>
					 </select>
				 </td>
			 </tr>
	    	<tr>
	    		<td colspan="2" align="center">
					<input class="submit" type="submit" value="提交">
					<input type="reset" value="重置"/>
	    		<input type="button" value="demo" onclick="show()"/>
	    		</td>
	    		
	    	</tr>	    	
	    </table>
	    
  </form> 
    
  </body>
</html>
